<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* @keyframes 定义关键帧
animation-name 指定应用动画的名字
animation-duration 指定动画的周期
animation-delay    指定延时
animation-iteration-count 指定次数
animation-direction    指定方向
animation-timing-function
animation-fill-mode
animation */
        .box1 {
            width: 600px;
            height: 300px;
            border: 10px solid red;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            /*  animation：简写属性，没有先后顺序，
                唯一需要注意的就是 第一个时间永远是动画的周期
                后面的事件是延时
            */
            animation: myat 3s infinite steps(5, start);

            /* animation-name: myat; */
            /* animation-duration: 16s; */
            /* animation-delay: 3s; */
            /* animation-iteration-count: infinite; */
            /* reverse:反向
                alternate:原路返回
            */
            /* animation-direction: alternate; */

            /* steps（）分步走完动画 最后一帧会丢失 */
            /* animation-timing-function: steps(6); */

            /* forwards：停在结束位置
                backwards:跑完之后回到原点
            */
            /* animation-fill-mode: backwards; */
        }

        @keyframes myat {
            0% {
                margin-left: 0px;
            }

            100% {
                margin-left: 500px;
            }
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

</html>